<!-- 通用卡片组件 -->

<template>
  <view class="card" @click="$emit('click')">
    <view class="card-img" v-if="image">
      <image :src="image" mode="widthFix"></image>
    </view>
    <view class="card-content">
      <view class="card-title">{{ title }}</view>
      <view class="card-desc">{{ desc }}</view>
      <view class="card-footer">
        <text class="time">{{ time }}</text>
        <view class="actions" v-if="showActions">
          <text class="like" @click.stop="$emit('like')">
            <image src="/static/icons/like.png" mode="widthFix"></image>
            <text>{{ likeCount || 0 }}</text>
          </text>
          <text class="comment" @click.stop="$emit('comment')">
            <image src="/static/icons/comment.png" mode="widthFix"></image>
            <text>{{ commentCount || 0 }}</text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: String,
    desc: String,
    time: String,
    image: String,
    likeCount: Number,
    commentCount: Number,
    showActions: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped>
.card {
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
}
.card-img {
  width: 200rpx;
  height: 200rpx;
  flex-shrink: 0;
}
.card-img image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-content {
  flex: 1;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-title {
  font-size: 30rpx;
  font-weight: 500;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-desc {
  font-size: 24rpx;
  color: var(--text-secondary);
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22rpx;
  color: #909399;
}
.actions {
  display: flex;
  gap: 20rpx;
}
.actions image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 5rpx;
  vertical-align: middle;
}
.like, .comment {
  display: flex;
  align-items: center;
}
</style>
